<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import Vue before Element 引入 VUE.js-->
    <script src="./js/vue.min.js"></script>
    <!--    引入axios 的CSS-->
    <script src="./js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./elementui/unpkg.com_element-ui@2.15.14_lib_theme-chalk_index.css">
    <!-- 引入组件库 -->
    <script src="./elementui/unpkg.com_element-ui@2.15.14_lib_index.js"></script>
    <style>
        header a {
            text-decoration: none;
            color: #6c6c6c;
        }

        .el-table .el-table__cell {
            padding: 0; /*去掉表格中每一行自带的内边距*/
        }

        .el-table .cell {
            white-space: nowrap; /*让内容在一行中显示*/
            /* text-overflow: ellipsis;*//*文本内容超出范围时用省略号表示*/
        }

        .p_img:hover {
            position: relative;
            top: 5px;
            /*设置元素阴影:x偏移值 y偏移值 浓度 范围 颜色*/
            box-shadow: 0 0 10px 5px #333;
        }
        .el-main a{
            color: black;
            text-decoration: none;
        }
        .el-main a:hover{
            color: #666;
        }
    </style>
</head>
<body>

<style>
    .breadcrumb-wrapper {
        position: fixed; /* 设置为固定定位 */
        margin-top: 0px;
        margin-bottom: 5px;
    }

    .layout-header {
        line-height: 60px;
        background: #1684b0;
        color: #fff;
    }
    .layout-body {
        position: absolute;
        top: 60px;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .layout-aside {
        background: #222c32;
    }
    .layout-aside i {
        color: #fff !important;
    }
    .el-menu-item.is-active {
        background: #2d3c4d !important;
    }
    /* 为 el-card 组件的自定义类名设置上边距 */
    .custom-card {
        margin-top: 30px;
    }
</style>
<div id="app">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><a href="/index.html">任务管理</a></el-breadcrumb-item>
            <el-breadcrumb-item><a href="/addNew.html">新建任务</a></el-breadcrumb-item>
            <el-breadcrumb-item><a href="/databaseConfig.html">数据库配置</a></el-breadcrumb-item>
            <el-breadcrumb-item><a href="/FTPConfig.html">FTP配置</a></el-breadcrumb-item>
            <el-breadcrumb-item><a href="/addNew.html">数据库引用</a></el-breadcrumb-item>
            <el-breadcrumb-item>日志跟踪</el-breadcrumb-item>
            <el-breadcrumb-item>消息提醒</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider>新建任务</el-divider>
    <el-card>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="数据推送" name="first">
                <template>
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-row :gutter="20">
                            <el-col :span="8"><div class="grid-content bg-purple">
                                <el-form-item label="任务名称" prop="taskName" >
                                    <el-input v-model="ruleForm.taskName "></el-input>
                                </el-form-item>
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">
                                <el-form-item label="任务代码" prop="taskCode" >
                                    <el-input v-model="ruleForm.taskCode"></el-input>
                                </el-form-item>
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">
                                <el-form-item label="任务类名" prop="jobClass" >
                                    <el-input v-model="ruleForm.jobClass"></el-input>
                                </el-form-item>
                            </div></el-col>

                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="8"><div class="grid-content bg-purple">
                                <el-form-item label="任务分组" prop="jobGroup" >
                                    <el-input v-model="ruleForm.jobGroup"></el-input>
                                </el-form-item>
                            </div></el-col>
                            <el-col :span="6"><div class="grid-content bg-purple">
                                <el-form-item label="Cron表达式" prop="cron" >
                                    <el-input v-model="ruleForm.cron"></el-input>
                                </el-form-item>
                            </div></el-col>
                            <el-col :span="10"><div class="grid-content bg-purple">
                                <el-form-item label="导出路径(本地)" prop="dataExportPath" label-width="150px" >
                                    <el-input v-model="ruleForm.dataExportPath"></el-input>
                                </el-form-item>
                            </div></el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8"><div class="grid-content bg-purple">
                                <el-form-item label="导出文件保留时间（毫秒）" prop="dataFileKeepTime" label-width="200px" >
                                    <el-input style="width: 200px;" v-model="ruleForm.dataFileKeepTime"></el-input>
                                </el-form-item>
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">
                                <el-form-item label="系统编码" prop="sysNum" >
                                    <el-input v-model="ruleForm.sysNum"></el-input>
                                </el-form-item>
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">
                                <el-form-item label="表名（文件标识）" prop="tableName" label-width="150px">
                                    <el-input v-model="ruleForm.tableName"></el-input>
                                </el-form-item>
                            </div></el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="8"><div class="grid-content bg-purple">
                                <el-form-item label="导出命令（SQL）" prop="exportShell" label-width="150px">
                                    <el-input type="textarea" v-model="ruleForm.exportShell"></el-input>
                                </el-form-item>
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">
                                <el-form-item label="增量导出SQL" prop="tableIsIncrementsSQL" label-width="150px">
                                    <el-input type="textarea" v-model="ruleForm.tableIsIncrementsSQL"></el-input>
                                </el-form-item>
                            </div></el-col>
                            <el-col :span="8"><div class="grid-content bg-purple">
                                <el-form-item label="是否生成ctl文件" prop="isCreateCtl" label-width="150px">
                                    <el-radio-group v-model="ruleForm.isCreateCtl" placeholder="请选择是否生成ctl文件">
                                        <el-radio label="1">是</el-radio>
                                        <el-radio label="0">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </div></el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12"><div class="grid-content bg-purple">
                                <el-form-item label="导出方式" prop="tableIsIncrements" label-width="150px">
                                    <el-radio-group v-model="ruleForm.tableIsIncrements">
                                        <el-radio label="0">全量导出</el-radio>
                                        <el-radio label="1">增量导出</el-radio>
                                        <el-radio label="-1">首次全量导出后增量导出</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </div></el-col>
                            <el-col :span="12"><div class="grid-content bg-purple">
                                <el-form-item label="是否FTP传输" prop="isEnableFtp" label-width="150px">
                                    <el-radio-group v-model="ruleForm.isEnableFtp">
                                        <el-radio label="0">是</el-radio>
                                        <el-radio label="1">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </div></el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12"><div class="grid-content bg-purple">
                                <el-form-item label="选择数据库" prop="dbId" label-width="150px">
                                    <el-select v-model="ruleForm.dbId" placeholder="请选择数据库配置">
                                        <el-option
                                                v-for="item in dbSelectdata"
                                                :key="item.dbId"
                                                :label="item.name"
                                                :value="item.dbId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div></el-col>
                            <el-col :span="12"><div class="grid-content bg-purple">
                                <el-form-item label="选择FTP路径" prop="ftpId" label-width="150px">
                                    <el-select v-model="ruleForm.ftpId" placeholder="FTP路径">
                                        <el-option
                                                v-for="item in ftpSelectdata"
                                                :key="item.fid"
                                                :label="item.name"
                                                :value="item.fid">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div></el-col>
                        </el-row>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </template>
            </el-tab-pane>
            <el-tab-pane label="文件删除" name="second">文件删除</el-tab-pane>
            <el-tab-pane label="接口收发" name="third">接口收发</el-tab-pane>
            <el-tab-pane label="数据改造" name="fourth">数据改造</el-tab-pane>
        </el-tabs>
    </el-card>
</div>

</body>

<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .deleted-row {
        background-color: #ffe6e6; /* 设置删除状态的行背景色 */
    }

</style>

<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                dbSelectdata:[],
                ftpSelectdata:[],
                ruleForm: {
                    taskName: '导出柜员信息表',
                    tableIsIncrementsSQL: 'sql',
                    taskCode: 'code1',
                    jobClass: 'jzbank.job.DataExportJob',
                    jobGroup: 'dc',
                    cron: '0 */3 * * * ?',
                    delStatus: '0', // 默认值为启动
                    createTime: '2023-09-28',
                    dataExportPath: 'D:\\',
                    dataFileKeepTime: '864000000',
                    sysNum: 'S55',
                    exportShell: 'select CLERKNUM,CLERKNAME,CLERKPWD,POSTNUM,POSTNAME,N_UPDATEDATE,N_ORGANNUM,N_ERROR,N_LOGDATE,N_IP,N_CREATOR,SHENGHJGH,WDFLAG from CLERKTABLE',
                    isCreateCtl: '0', // 默认值为生成
                    tableName: 'CLERKTABLE',
                    tableIsIncrements: '0', // 默认值为全量导出
                    isEnableFtp: '0', // 默认值为不使用FTP传输
                    dbId: '',
                    ftpId: ''
                },
                activeName: 'first',
                rules: {
                    taskName: [
                        { required: true, message: '请输入任务名称', trigger: 'blur' }
                    ],
                    tableIsIncrementsSQL: [
                        { required: true, message: '请输入增量导出SQL', trigger: 'blur' }
                    ],
                    taskCode: [
                        { required: true, message: '请输入任务代码', trigger: 'blur' }
                    ],
                    jobClass: [
                        { required: true, message: '请输入任务类名', trigger: 'blur' }
                    ],
                    jobGroup: [
                        { required: true, message: '请输入任务分组', trigger: 'blur' }
                    ],
                    cron: [
                        { required: true, message: '请输入Cron表达式', trigger: 'blur' }
                    ],
                    dataExportPath: [
                        { required: true, message: '请输入数据文件导出路径', trigger: 'blur' }
                    ],
                    dataFileKeepTime: [
                        { required: true, message: '请输入数据导出文件保留时间', trigger: 'blur' }
                    ],
                    sysNum: [
                        { required: true, message: '请输入系统编码', trigger: 'blur' }
                    ],
                    exportShell: [
                        { required: true, message: '请输入导出命令（SQL）', trigger: 'blur' }
                    ],
                    tableName: [
                        { required: true, message: '请输入表名', trigger: 'blur' }
                    ],
                    isCreateCtl: [
                        { required: true, message: '请选择是否生成ctl文件', trigger: 'change' }
                    ],
                    tableIsIncrements: [
                        { required: true, message: '请选择导出方式', trigger: 'change' }
                    ],
                    isEnableFtp: [
                        { required: true, message: '请选择是否FTP传输', trigger: 'change' }
                    ],
                    dbId: [
                        { required: true, message: '请选择数据库', trigger: 'change' }
                    ]
                    ,
                    ftpId: [
                        { required: true, message: 'FTP方式', trigger: 'change' }
                    ]
                }
            }
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    console.log(this.ruleForm)
                        if (valid) {
                            const requestData = {
                                'taskName': this.ruleForm.taskName,
                                'tableIsIncrementsSQL': this.ruleForm.tableIsIncrementsSQL,
                                'taskCode':this.ruleForm.taskCode ,
                                'jobClass':this.ruleForm.jobClass ,
                                'jobGroup':this.ruleForm.jobGroup ,
                                'cron': this.ruleForm.cron,
                                'delStatus':this.ruleForm. delStatus,
                                'createTime':this.ruleForm.createTime ,
                                'dataExportPath': this.ruleForm.dataExportPath,
                                'dataFileKeepTime':this.ruleForm.dataFileKeepTime ,
                                'sysNum': this.ruleForm.sysNum,
                                'exportShell':this.ruleForm.exportShell ,
                                'isCreateCtl': this.ruleForm.isCreateCtl,
                                'tableName':this.ruleForm.tableName ,
                                'tableIsIncrements': this.ruleForm.tableIsIncrements,
                                'isEnableFtp': this.ruleForm.isEnableFtp,
                                'dbId': this.ruleForm.dbId,
                                'ftpId':this.ruleForm.ftpId
                            };
                            //发送 POST 请求
                            axios.post( '/export/create', requestData).then(function (response) {
                                if (response.data.code=200000){
                                    v.$message.success(response.data.msg);
                                }else {
                                    v.$message.error(response.data.msg);
                                }
                            })
                        }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            listftp(){
                const apiUrl = 'database/list'; // 接口地址
                const vm = this; // 保存 Vue 实例的引用
                axios.get(apiUrl)
                    .then(function (response) {
                        if (response.data.code == 200000) {
                            vm.dbSelectdata = response.data.result;
                            console.log(vm.dbSelectdata);
                        } else {
                            vm.$message.error(response.data.msg);
                        }
                    });
            },
            listDb(){
                const apiUrl = '/ftp/list'; // 接口地址
                const vm = this; // 保存 Vue 实例的引用
                axios.get(apiUrl)
                    .then(function (response) {
                        if (response.data.code == 200000) {
                            vm.ftpSelectdata = response.data.result;

                        } else {
                            vm.$message.error(response.data.msg);
                        }
                    });
            }

        },
        created() {
            // 在组件创建时调用listftp方法
            this.listftp();

            // 在组件创建时调用listDb方法
            this.listDb();
        }
    })
</script>
</html>